<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/animate.css">
    <style>
        .box{
            background-color: green;
            text-align: center;
            width: 300px;
            height: 200px;
            line-height: 200px;
            font-size: 20px;
            color: white;
        }
        .start{
            opacity: 1;
        }
        .an{
            transition: all 3s ease;
        }
        .end{
            opacity: 0;
        }
        .list li{
            background-color: #ccc;
            margin: 10px;
            width: 300px;
        }
        .listin{
            opacity: 0;
            transform: translate(100%,0);
        }
        .listin1{
            opacity: 1;
            transform: translate(0,0);
        }
        .move{
            transition: all 2s ease;
        }
        .listout{
            opacity: 1;
            transform: translate(0,0);
        }
        .listout1{
            opacity: 0;
            transform: translate(-100%,0);
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="显示|隐藏" @click=" flag=!flag ">
        <!-- 
            vue 提供过渡效果组件：配合vue的相关功能语法，实现vue功能和css动画样式的整合
                - 组件名(包裹形组件)：transition
                - 组件名(包裹形组件)：transition-group
            
            使用前提：
                - transition 动画组件包裹的根元素必须带有相关的vue元素操作功能
                - transition-group 动画组件包裹的多个一级元素必须带有相关的vue元素操作功能
                                   且内部的每个元素都必须存在唯一 key 值
         -->
        <hr>
        <transition
            leave-class="start" leave-active-class="an" leave-to-class="end"
            enter-class="end" enter-active-class="an" enter-to-class="start"
        >
            <div v-show="flag" class="box">{{ msg }}</div>
        </transition>
        <hr>
        <transition
            leave-class="start" leave-active-class="an" leave-to-class="end"
            enter-class="end" enter-active-class="an" enter-to-class="start"
        >
            <div v-if="flag" class="box">{{ msg }}</div>
        </transition>
        <hr>
        <input type="button" value="addItem" @click=" list.push( Math.random() ) ">

        <ul class="list">
            <transition-group
                enter-class="listin" enter-active-class="move" enter-to-class="listout"
                leave-class="listin1" leave-active-class="move" leave-to-class="listout1"
                @after-leave="showTip"
            >
                <li v-for="(item, index) in list" :key="item">
                    {{ item }}
                    <input type="button" value="x" @click=" list.splice(index,1) ">
                </li>
            </transition-group>
        </ul>

        <hr>
        <p>配合已有的动画库进行效果执行</p>
        <input type="button" value="显示|隐藏" @click="flag2=!flag2">
        <!-- <transition
            enter-active-class="animate__animated animate__fadeInUpBig" leave-active-class="animate__animated animate__fadeOutDownBig"
        >
            <div v-if="flag2" class="box ">{{ msg }}</div>
        </transition> -->
        <transition
        enter-active-class="animate__fadeInUpBig" leave-active-class="animate__fadeOutDownBig"
    >
        <div v-if="flag2" class="box animate__animated">{{ msg }}</div>
    </transition>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"欢迎",
                flag:true,
                flag2:true,
                list:[
                    Math.random(),
                    Math.random(),
                    Math.random()
                ]
            },
            methods: {
                showTip(){
                    alert("动画执行完成")
                }
            },
            
        })
    </script>
</body>
</html>